<template>
	<div>
		<shopHeader :shopInfo='shopInfo'></shopHeader>
		
		<div class="tabs">
			<router-link to="goods" replace class="tab-item"><span>点餐</span></router-link>
			<router-link to="ratings" replace class="tab-item"><span>评价</span></router-link>
			<router-link to="info" replace class="tab-item"><span>商家</span></router-link>
		</div>
		
		<keep-alive>
			<router-view></router-view>
		</keep-alive>
		
	</div>
</template>

<script>
	import shopHeader from '../../components/ShopHeader.vue'
	export default {
		data() {
			return {
				// 商家信息对象
				shopInfo: {}
			}
		},
		created() {
			this.getShopInfo()
		},
		methods: {
			// 获取商家信息
			async getShopInfo() {
				const {	data : res } =	await this.$http.get('/shop_info')
				console.log('商家信息',res)
				
				if(res.code !== 0) return console.log('获取商品列表失败')
				
				this.shopInfo = res.data
			}
		},
		components: {
			shopHeader
		}
	}
</script>



<style lang="less" scoped>
	.tabs{
		width: 100%;
		border-bottom: 2px solid #efefef;
		display: flex;
		
		.tab-item{
			span{
				display: inline-block;
				position: relative;
				&::after{
					content: '';
					position: absolute;
					left: 50%;
					bottom: 0;
					width: 0;
					height: 2px;
					background: #03A774;
					transition: .5s;
					transform: translateX(-50%);
					opacity: 0;
				}
			}
			&.router-link-active{
				span {
					color: #03A774;
					&::after{
						width: 100%;
						opacity: 1;
					}
				}
			}
			flex: 1;
			height: 40px;
			line-height: 40px;
			text-align: center;
		}
	}
</style>